<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import {http} from "@/api";
const apiKey = 'Staff'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({
  nickname: '',
  phone: '',
  gender: '男',
  age: 0,
  city_id: null,
  status: 1,
  avatar: '',
  photos: '',
  description: '',
  content: '',
  emergency_contact_name: '',
  emergency_contact_phone: '',
  is_recommend: 0,
  sort: 1,
  is_del: 0,
  card_no: '',
  // 身份证正面
  card_front: '',
  // 身份证反面
  card_back: '',
  // 身份证手持
  card_hand: '',
  // 健康证
  health_certificate: '',
  // 其他证书
  other_certificate: '',
  // 职业技能介绍
  skill_introduction: '',
  sale_count: 0,
  pdf_url: '',
})
const rules = ref({
  nickname: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
  city_id: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  avatar: [
    { required: true, message: '请上传', trigger: 'blur' }
  ],
  photos: [
    { required: true, message: '请上传', trigger: 'blur' }
  ],
})
const cityList = ref([])
http.city.list().then(res => {
  cityList.value = res.data
})
const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read(id).then(res => {
    formData.value= res.data
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<template>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c ">
      <div class="form-box form-box2">
        <el-form ref="formRef" style="width: 660px" :model="formData" :rules="rules" label-position="top" >
         <el-row :gutter="20">
           <el-col>
             <el-divider content-position="left">基本信息</el-divider>
           </el-col>
           <el-col :span="12">
             <el-form-item label="手机号" prop="phone">
               <el-input v-model="formData.phone"></el-input>
             </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="nickname">
              <el-input v-model="formData.nickname"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
             <el-form-item label="性别" prop="gender">
               <el-radio-group v-model="formData.gender">
                 <el-radio value="男">男</el-radio>
                 <el-radio value="女">女</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="年龄" prop="age">
               <el-input v-model="formData.age" type="number"></el-input>
             </el-form-item>
           </el-col>
            <el-col :span="12">
              <el-form-item label="城市" prop="city_id">
                <el-select v-model="formData.city_id" placeholder="请选择">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
           <el-col :span="12">
             <el-form-item label="销量" prop="sale_count">
               <el-input clearable v-model="formData.sale_count" type="number"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="地址" prop="address">
               <el-input clearable v-model="formData.address" type="textarea"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="经度" prop="sale_count">
               <el-input clearable v-model="formData.longitude"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="纬度" prop="latitude">
               <el-input clearable v-model="formData.latitude" ></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="头像"  prop="avatar">
               <UploadImage v-model:image="formData.avatar"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="照片"  prop="photos">
               <UploadImage v-model:image="formData.photos"/>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="个人简介" style="width: 100%" prop="description">
               <el-input clearable v-model="formData.description" type="textarea"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="合同" style="width: 100%" prop="pdf_url">
               <UploadFile v-model:image="formData.pdf_url"/>
             </el-form-item>
           </el-col>
           <el-col>
             <el-divider content-position="left">紧急联系人</el-divider>
           </el-col>
           <el-col :span="12">
             <el-form-item label="紧急联系人" prop="emergency_contact_name">
               <el-input v-model="formData.emergency_contact_name"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="紧急联系人电话" prop="emergency_contact_phone">
               <el-input v-model="formData.emergency_contact_phone"></el-input>
             </el-form-item>
           </el-col>
           <el-col>
             <el-divider content-position="left">基本概况</el-divider>
           </el-col>
           <el-col :span="12">
             <el-form-item label="是否推荐">
               <el-switch :active-value="1" :inactive-value="0" v-model="formData.is_recommend"/>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="启用状态">
               <el-switch :active-value="1" :inactive-value="0" v-model="formData.status"/>
             </el-form-item>
           </el-col>
           <el-col>
             <el-divider content-position="left">认证信息</el-divider>
           </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="card_no">
                <el-input v-model="formData.card_no"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证正面"  prop="card_front">
                <UploadImage v-model:image="formData.card_front"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证反面"  prop="card_back">
                <UploadImage v-model:image="formData.card_back"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手持身份证"  prop="card_hand">
                <UploadImage v-model:image="formData.card_hand"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="健康证"  prop="health_certificate">
                <UploadImage v-model:image="formData.health_certificate"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他证书"  prop="other_certificate">
                <UploadImage v-model:image="formData.other_certificate"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="职业技能介绍" style="width: 100%" prop="skill_introduction">
                <el-input clearable v-model="formData.skill_introduction" type="textarea"></el-input>
              </el-form-item>
            </el-col>
         </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
<style lang="scss">
</style>
